<template>
  <div class="upload-filter-tab">
    <div class="upload-filter-tab-flex">
      <template v-for="(item, index) in tabs">
        <div
          v-if="item.authShow"
          :key="index"
          :class="['upload-tabs-item', activeTabs === item.key ? 'active' : '']"
          @click="handleTabClick(item.key)"
        >{{ item.label }}</div>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  name: 'UploadFilterTab',
  props: {
    tabs: {
      type: Array,
      default: () => {
        return [];
      }
    },
    type: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      activeTabs: this.type
    };
  },
  methods: {
    handleTabClick(key) {
      this.activeTabs = key;
      this.$emit('upadte:uploadTabs', key);
    }
  }
};
</script>
<style lang="scss" scoped>
$MediumColor: #406EFF;
.upload-filter-tab {
  width: 100%;
  padding: 10px 30px 0 26px;
  box-sizing: content-box;
  margin: 0 auto;
  height: 40px;
  border-bottom: 1px solid rgba(245,245,245,1);
  display: flex;
  background: #fff;

  .upload-filter-tab-flex {
    height: 40px;
    display: flex;
    flex: 1;
    align-items: center;
  }
  .upload-tabs-item {
    height: 100%;
    line-height: 24px;
    margin: 0 15px;
    padding: 0 7px;
    cursor: pointer;
    font-size: 20px;
    font-family:PingFangSC-Medium,PingFang SC;
    font-weight:500;
    color:#333333;
    white-space: nowrap;
    &:first-child {
      margin-left: 0;
    }
    &.active {
      font-weight: 500;
      position: relative;
      color: #406EFF;
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        border-radius: 4px;
        background-color: $MediumColor;
        width:40px;
        height:2px;
        margin-left: -20px;
      }
    }
  }
}
</style>
